{include file="../application/admin/view/common/header.html" /}
<style type="text/css">
    .btn-blue, .btn-blue:hover, .btn-blue:focus {
        background-color: #3171b4;
        border-color: #3171b4;
        color: #ffffff;
    }

    .table-btn, .table-btn:hover, .table-btn:focus {
        border-radius: 2px;
        -webkit-border-radius: 2px;
        text-transform: capitalize;
        font-size: 13px;
        padding: 0px 4px;
        font-weight: 400;
        color: #666666;
        background-color: #c3c3c3;
    }

    .enable {
        color: #3171b4
    }

    .disable {
        color: #ff2929
    }

    .table {
        text-align: center;
    }

    .table thead {
        background-color: #aad4ff;
    }

    .table tbody {
        font-size: 13px;
        color: #333333;
    }

    .table tbody .buttons {
        padding: 3px;
    }

    .table thead {
        font-size: 14px;
        font-weight: bold;
        color: #111111;
    }

    .table thead th {
        text-align: center;
    }
</style>
<!--main content start-->
<section class="main-content">


    <!--start page content-->

    <div class="row">

        <div class="col-md-12">
            <div class="panel panel-default collapsed">
                <div class="panel-heading">
                    <a class="btn btn-danger ui-w" onclick="datadel(this)" href="javascript:void(0);"><span
                            class="ui-icon ui-icon-trash"> </span>批量删除</a>
                    <a class="btn btn-blue ui-w" onclick="admin_add(this)" href="javascript:void(0);"><span
                            class="ui-icon ui-icon-plus"></span>添加管理员</a>
                    <div class="search-form">
                        <input type="text" class="form-control" placeholder="搜索管理员名称/手机/邮箱"/>
                        <button type="button" class="btn-search" onclick="search_btn()"><i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="panel-body">

                    <table class="table table-hover table-striped table-bordered" data-page-size="12"
                           data-filter=#filter>
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>手机</th>
                            <th>邮箱</th>
                            <th>角色</th>
                            <th>创建时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>
                    <div class="pager" id="page" style="text-align: right;"></div>
                </div>
            </div>
        </div>
    </div><!--end row-->

    <!--end page content-->
</section>
<!--end main content-->


<!--Common plugins-->
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_JS_/bootstrap.min.js"></script>
<script src="_JS_/jasny-bootstrap.min.js"></script>
<script src="_JS_/jquery.slimscroll.min.js"></script>
<script src="_JS_/jquery.nanoscroller.min.js"></script>
<script src="_JS_/metismenu.min.js"></script>
<script src="_JS_/float-custom.js"></script>
<script type="text/javascript" src="_JS_/layer/layer.js"></script>
<script type="text/javascript" src="_JS_/laypage/laypage.js"></script>
<script type="text/javascript" src="_JS_/getMyDate.js"></script>
<!-- Page-Level Scripts -->
<script>
    $(function () {
        $("#page-title").html("管理员列表");
        //加载管理员列表
        getlist(1);
    });


    //获取管理列表
    function getlist(page, search) {
        $.ajax({
            type: "get",
            url: "{:url('api/admin/admin_list')}",
            dataType: 'jsonp',
            jsonp: 'callback',
            data: {'search': search, 'page': page},
            beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
            },
            success: function (msg) {
                layer.closeAll();
                $("#admin_management").addClass("active").children("ul").addClass("in");
                $("#admin_list").addClass("choose");
                if (msg.code == 200) {
                    $(".table tbody").html("");
                    var pages = Math.ceil(msg.data.count / 10);
                    if (msg.data.data.length > 0) {
                        for (var i = 0; i < msg.data.data.length; i++) {
                            var time = msg.data.data[i].time;
                            ltime = getMyDate(time * 1000);
                            var html = '<tr id="' + msg.data.data[i].uid + '">';
                            html += '<td><input type="checkbox" name="allcheck"></td>';
                            html += '<td>' + msg.data.data[i].uid + '</td><td>' + msg.data.data[i].username + '</td>';
                            html += '<td>' + msg.data.data[i].phone + '</td><td>' + msg.data.data[i].email + '</td>';
                            html += '<td>' + msg.data.data[i].name + '</td><td>' + ltime + '</td>';
                            if (msg.data.data[i].status == 1) {
                                html += '<td class="td-status enable" status="1">已启用</td>';
                                html += '<td class="buttons td-manage"><a class="btn table-btn " onClick="admin_stop(this)" href="javascript:;" title="禁用"><i class="fa fa-ban"></i></a>';
                            } else if (msg.data.data[i].status == 2) {
                                html += '<td class="td-status disable" status="2">已禁用</td>';
                                html += '<td class="buttons td-manage"><a class="btn table-btn " onClick="admin_start(this)" href="javascript:;" title="启用"><i class="fa fa-check-circle-o enable"></i></a>';
                            }
                            html += '<a class="btn table-btn" onclick="admin_edit(this)" href="#" title="编辑"><i class="fa fa-pencil"></i></a><a class="btn table-btn" onclick="admin_del(this)" href="#" title="删除"><i class="fa fa-trash-o"></i></a></td></tr>';
                            $(".table tbody").append(html);
                            $(".table").attr("pages", page);
                            //分页
                            laypage({
                                cont: 'page',
                                pages: pages,
                                curr: page,
                                jump: function (obj, first) {
                                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                        getlist(obj.curr);
                                    }
                                }
                            })
                        }
                    } else {
                        $('#page').hide();
                        $(".table tbody").append('<tr><td colspan="9">没有相关数据</td></tr>');
                    }
                }
                if (msg.code == 1000) {
                    alert("加载信息失败！");
                }
            },
        });
    }

    /*批量删除*/
    function datadel() {
        var arrs = new Array();
        var user_id = $("#username").attr("user_id");
        $(".table input[name='allcheck']:checked").each(function () {
            arrs.push($(this).parents('tr').attr('id'));
        });
        if (arrs.length == 0) {
            layer.msg('请选择删除项!', {icon: 1, time: 1000});
            return;
        }
        var uids = arrs.join(",");
        layer.confirm('确认要删除多个管理员吗？', function (index) {
            var pages_num = $(".table").attr("pages");
            if ($('#1 input[type="checkbox"]').is(':checked') || $('#' + user_id).find('input[type="checkbox"]').is(':checked')) {
                layer.msg('您没有权限删除!', {icon: 4, time: 2000});
            } else {
                $.ajax({
                    type: "get",
                    url: "{:url('api/admin/admin_del')}",
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    data: {'uid': uids},
                    success: function (msg) {
                        if (msg.code == 200) {
                            $(".table input[name='allcheck']:checked").parents('tr').remove();
                            getlist(pages_num);
                            layer.msg('已删除!', {icon: 1, time: 1000});
                        }
                        if (msg.code == 1000) {
                            layer.msg(msg.message, {icon: 5, time: 1000});
                        }
                    }
                });
            }


        });
    }

    /*添加管理员*/
    function admin_add(obj) {
        layer.open({
            type: 2,
            title: '添加管理员',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: 'admin_add.html'
        });
    }

    //编辑管理员
    function admin_edit(obj) {
        var id = "#" + $(obj).parents("tr").attr("id");
        layer.open({
            type: 2,
            title: '编辑',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: 'admin_edit.html' + id,
        });
    }

    /*管理员-删除*/
    function admin_del(obj) {
        var user_id = $("#username").attr("user_id");
        layer.confirm('确认要删除吗？', function (index) {
            var uid = $(obj).parents("tr").attr("id");
            pages_num = $(".table").attr("pages");
            //判断用户是否有权限删除
            if (uid != 1 && uid != user_id) {
                $.ajax({
                    type: "get",
                    url: "{:url('api/admin/admin_del')}",
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    data: {'uid': uid},
                    success: function (msg) {
                        if (msg.code == 200) {
                            $(obj).parents("tr").remove();
                            getlist(pages_num);
                            layer.msg('已删除!', {icon: 1, time: 1000});
                        }
                        if (msg.code == 1000) {
                            layer.msg(msg.message, {icon: 5, time: 1000});
                        }
                    }
                });
            } else {
                layer.msg('您没有权限删除!', {icon: 4, time: 1000});
            }
        });
    }

    /*管理员-启用*/
    function admin_start(obj) {
        layer.confirm('确认要启用吗？', function (index) {
            var status = 1;
            uid = $(obj).parents("tr").attr("id");
            $.ajax({
                type: "get",
                url: "{:url('api/admin/change_status')}",
                dataType: 'jsonp',
                jsonp: 'callback',
                data: {'uid': uid, 'status': status},
                success: function (msg) {
                    if (msg.code == 200) {
                        $(obj).parents("tr").find(".td-manage").prepend('<a class="btn table-btn" onClick="admin_stop(this)" href="javascript:;" title="禁用"><i class="fa fa-ban"></i></a>');
                        $(obj).parents("tr").find(".td-status").html('已启用').attr("status", 1);
                        ;
                        $(obj).parents("tr").find(".td-status").addClass("enable").removeClass("disable");
                        $(obj).remove();
                        layer.msg('已启用!', {icon: 1, time: 1000});
                    }
                    if (msg.code == 1000) {
                        layer.msg(msg.message, {icon: 1, time: 1000});
                    }
                }
            });
        });
    }

    /*管理员-停用*/
    function admin_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            var status = 2;
            uid = $(obj).parents("tr").attr("id");
            $.ajax({
                type: "get",
                url: "{:url('api/admin/change_status')}",
                dataType: 'jsonp',
                jsonp: 'callback',
                data: {'uid': uid, 'status': status},
                success: function (msg) {
                    if (msg.code == 200) {
                        $(obj).parents("tr").find(".td-manage").prepend('<a class="btn table-btn" onClick="admin_start(this)" href="#"><i class="fa fa-check-circle-o enable" title="启用"></i></a>');
                        $(obj).parents("tr").find(".td-status").html('已禁用').attr("status", 2);
                        $(obj).parents("tr").find(".td-status").addClass("disable").removeClass("enable");
                        $(obj).remove();
                        layer.msg('已停用!', {icon: 1, time: 1000});
                    }
                    if (msg.code == 1000) {
                        layer.msg(msg.message, {icon: 1, time: 1000});
                    }
                }
            });
        });
    }

    //回车键绑定搜索
    $(".search-form").keydown(function (event) {
        if (event.keyCode == 13) {
            search_btn();
        }
    })

    //搜索
    function search_btn() {
        var search = $(".search-form input").val();
        search_from(search, 1);
    }

    function search_from(search, page) {
        $.ajax({
            type: "get",
            url: "{:url('api/admin/admin_select')}",
            dataType: 'jsonp',
            data: {'search': search, 'page': page},
            beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
            },
            success: function (msg) {
                layer.closeAll();
                if (msg.code == 200) {
                    $(".table tbody").html("");
                    var pages = Math.ceil(msg.data.count / 10);
                    if (msg.data.data.length > 0) {
                        for (var i = 0; i < msg.data.data.length; i++) {
                            var time = msg.data.data[i].time;
                            ltime = getMyDate(time * 1000);
                            var html = '<tr id="' + msg.data.data[i].uid + '">';
                            html += '<td><input type="checkbox" name="allcheck"></td>';
                            html += '<td>' + msg.data.data[i].uid + '</td><td>' + msg.data.data[i].username + '</td>';
                            html += '<td>' + msg.data.data[i].phone + '</td><td>' + msg.data.data[i].email + '</td>';
                            html += '<td>' + msg.data.data[i].name + '</td><td>' + ltime + '</td>';
                            if (msg.data.data[i].status == 1) {
                                html += '<td class="td-status enable" status="1">已启用</td>';
                                html += '<td class="buttons td-manage"><a class="btn table-btn " onClick="admin_stop(this)" href="javascript:;" title="禁用"><i class="fa fa-ban"></i></a>';
                            } else if (msg.data.data[i].status == 2) {
                                html += '<td class="td-status disable" status="2">已禁用</td>';
                                html += '<td class="buttons td-manage"><a class="btn table-btn " onClick="admin_start(this)" href="javascript:;" title="启用"><i class="fa fa-check-circle-o enable"></i></a>';
                            }
                            html += '<a class="btn table-btn" onclick="admin_edit(this)" href="#" title="编辑"><i class="fa fa-pencil"></i></a><a class="btn table-btn" onclick="admin_del(this)" href="#" title="删除"><i class="fa fa-trash-o"></i></a></td></tr>';
                            $(".table tbody").append(html);
                            $(".table").attr("pages", page);
                            //分页
                            laypage({
                                cont: 'page',
                                pages: pages,
                                curr: page,
                                jump: function (obj, first) {
                                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                        getlist(obj.curr);
                                    }
                                }
                            })
                        }
                    } else {
                        $('#page').hide();
                        $(".table tbody").append('<tr><td colspan="9">没有相关数据</td></tr>');
                    }
                }
                if (msg.code == 1000) {
                    alert(msg.message);
                }
            }
        });
    }


</script>
</body>
</html>